<template>
	<view class="address_details">
		<u-form :model="form" ref="uForm"  :label-style="{'white-space':'nowrap','min-width':'75px'}" label-width='auto'>
			<u-form-item label="联系人：" prop="contacts"><u-input v-model="form.contacts"
					placeholder='请填输入联系人姓名' /></u-form-item>
			<u-form-item label="手机号：" prop='contacts_mobile'><u-input v-model="form.contacts_mobile"
					placeholder='请填写联系人手机号' /></u-form-item>
			<u-form-item label="所在社区：" prop='name'>
				<u-input v-model="form.name" placeholder='请输入社区名称' /></u-form-item>
			<u-form-item label="选择地区：">
				<view class="dianji" v-if="!form.area" @click="mapss()">
					请选择地区
				</view>
				<view class="" v-else  @click="mapss()">
					{{form.area}}
				</view>
			</u-form-item>
			<u-form-item label="详细地址：" prop="address"><u-input v-model="form.address"
					placeholder='请输入详细地址' /></u-form-item>
			<u-form-item label="设置为收货默认地址" porp='address'>
				<view class="address_box_item_text_xuan "
					:class="form.is_default==1 ? 'address_box_item_text_xuan_active' : ''" @click="default2()">
					<u-icon v-show='form.is_default==1' class="i_icon" name="checkbox-mark" color="#FF9A33"
						size="20"></u-icon>
				</view>
			</u-form-item>
			<view class="tiijao1" @click="submit">确认提交</view>

			<view class="clear1" v-show='!show' @click="clearadd()">删除</view>

		</u-form>

		<u-picker mode="region" confirm-color='#FBAA27' v-model="show3" @confirm='success_dq'
			:area-code='["13", "1303", "130304"]'></u-picker>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show3: false, //地区选择
				show: false, //判断是修改地址还是新增地址
				ids: '', //地址id
				form: {
					contacts: '', //联系人
					contacts_mobile: '', //联系人手机号
					name: '', //所在社区
					address: '', //详细地址
					area: '', //汉字滴入地址
					latitude: '', //经纬度
					longitude: '', //经纬度
					is_default: 1,
					openid: '',
					user_id: '',
				},

				rules: {
					contacts: [{
						required: true,
						message: '请输入姓名',
						trigger: ['blur', 'change']
					}],
					name: [{
						required: true,
						message: '请输入社区名称',
						trigger: ['blur', 'change']
					}],
					address: [{
						required: true,
						message: '请输入详细地址',
						trigger: ['blur', 'change']
					}],
					// 字段名称
					contacts_mobile: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					]
				}
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onShow() {
			this.form.openid = uni.getStorageSync('openid')
			this.form.user_id = uni.getStorageSync('userId')
		},
		onLoad(e) {
			this.getAddress()
			if (e.type == 1) {
				this.ids = e.id
				uni.setNavigationBarTitle({
					title: "修改地址",
					color: '#FF0000'
				})
				//获取当前地址信息
				this.set_add()
			} else {
				
				this.show = true
				uni.setNavigationBarTitle({
					title: "添加地址",
					color: '#FF0000'
				})
			}
		},
		methods: {
			// 展开地图选择
			mapss() {
				let _this = this
				uni.chooseLocation({
					longitude: _this.longitude,
					latitude: _this.latitude,
					success: function(res) {
						_this.form.longitude = res.longitude
						_this.form.latitude = res.latitude
						_this.form.area = res.address
						console.log(_this.form)
					},
					fail: function(err) {
						console.log(err)
					}
				});
			},
			// 获取坐标点
			getAddress() {
				let that = this
				uni.getLocation({
					type: 'gcj02',
					success: function(res) {
						that.latitude = res.latitude
						that.longitude = res.longitude
						// that.getShoeList()
					},
					fail: function(res) {

					}
				});
			},
			// 删除地址
			clearadd(){
				uni.$u.http.post('user/address_del', {
					openid: uni.getStorageSync('openid'),
					user_id: uni.getStorageSync('userId'),
					id:this.ids
				}).then(res => {
					this.$refs.uToast.show({
						title: res.msg,
					})
					if (res.code == 200) {
						setTimeout(function() {
							uni.navigateBack({
								delta: 1
							});
						}, 1000)
					}
				})
			},
			// 提交修改或新增
			submit() {
				let _this = this
				this.$refs.uForm.validate(valid => {
					if (valid) {
						if (_this.show == true) {
							_this.Addaddd()
						} else {
							_this.Setadd()
						}
					} else {
						console.log('验证失败');
					}
				});
			},
			set_add(){
				var sq = {}
				// 获取地址信息
				uni.$u.http.post('user/address_edit_list', {
					openid: uni.getStorageSync('openid'),
					user_id: uni.getStorageSync('userId'),
					id:this.ids
				}).then(res => {
					sq=res.data
					this.form=res.data
					
					console.log(res)
				})
			},
			// 修改地址
			Setadd() {
				let _this=this
				_this.form['openid']=uni.getStorageSync('openid')
				_this.form['user_id']=uni.getStorageSync('userId')
				uni.$u.http.post('user/address_edit_save', _this.form).then(res => {
					_this.$refs.uToast.show({
						title: res.msg,
					})
					setTimeout(function() {
						uni.navigateBack({
							delta: 1
						});
					}, 1000)
				})
			},
			// 新增地址
			Addaddd() {
				let _this = this
				uni.$u.http.post('user/address_add_save', _this.form).then(res => {
					if (res.code == 200) {
						this.$refs.uToast.show({
							title: res.msg,
						})

						setTimeout(function() {
							uni.navigateBack({
								delta: 1
							});
						}, 1000)
					}
				})
			},
			default2() {
				if (this.form.is_default == 0) {
					this.form.is_default = 1
				} else {
					this.form.is_default = 0
				}
			},
			// 选择地址
			success_dq(e) {
				this.area = e.province.label + '' + e.city.label + '' + e.area.label
			},
		}
	}
</script>

<style lang="scss" scoped>
	.address_details {
		padding: 39rpx 20rpx 0;
	}

	.dianji {
		font-size: 30rpx;
		font-weight: 500;
		color: #999999;
	}

	.tiijao1,
	.clear1 {
		width: 500rpx;
		line-height: 80rpx;
		height: 80rpx;
		border-radius: 40rpx;
		text-align: center;
		font-size: 36rpx;
		font-weight: 500;
		margin: 50rpx auto 0;
	}

	.tiijao1 {
		background: #FF9A33;
		color: #FFFFFF;
		margin-top: 175rpx;
	}

	.clear1 {
		border: 1rpx solid #7C7C7C;
		color: #7C7C7C;
	}

	.address_box_item_text_xuan {
		width: 40rpx;
		height: 40rpx;
		border: 4rpx solid #C6C4C4;
		border-radius: 50%;
		margin-right: 18rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		right: 0;
		top: 50%;
		transform: translate(0, -50%);
	}

	.address_box_item_text_xuan_active {
		border: 4rpx solid #FF9A33;
	}
	.u-form-left {
	  white-space:nowrap !important;	
	}
</style>